<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-center">
      <t-btn color="primary" label="Click me">
        <t-menu>
          <t-list dense style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>Open...</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>New</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Preferences</t-item-section>
              <t-item-section side>
                <t-icon name="keyboard_arrow_right" />
              </t-item-section>

              <t-menu anchor="top end" self="top start">
                <t-list>
                  <t-item v-for="n in 3" :key="n" dense clickable>
                    <t-item-section>Submenu Label</t-item-section>
                    <t-item-section side>
                      <t-icon name="keyboard_arrow_right" />
                    </t-item-section>
                    <t-menu auto-close anchor="top end" self="top start">
                      <t-list>
                        <t-item v-for="n in 3" :key="n" dense clickable>
                          <t-item-section>3rd level Label</t-item-section>
                        </t-item>
                      </t-list>
                    </t-menu>
                  </t-item>
                </t-list>
              </t-menu>
            </t-item>
            <t-separator />
            <t-item clickable v-close-popup>
              <t-item-section>Quit</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-bar
        style="min-width: 250px"
        class="bg-teal text-white rounded-borders"
      >
        <div class="cursor-pointer non-selectable">
          File
          <t-menu>
            <t-list dense style="min-width: 100px">
              <t-item clickable v-close-popup>
                <t-item-section>Open...</t-item-section>
              </t-item>
              <t-item clickable v-close-popup>
                <t-item-section>New</t-item-section>
              </t-item>
              <t-separator />
              <t-item clickable>
                <t-item-section>Preferences</t-item-section>
                <t-item-section side>
                  <t-icon name="keyboard_arrow_right" />
                </t-item-section>

                <t-menu anchor="top end" self="top start">
                  <t-list dense>
                    <t-item v-for="n in 3" :key="n" clickable>
                      <t-item-section>Submenu Label</t-item-section>
                      <t-item-section side>
                        <t-icon name="keyboard_arrow_right" />
                      </t-item-section>
                      <t-menu auto-close anchor="top end" self="top start">
                        <t-list dense>
                          <t-item v-for="n in 3" :key="n" clickable>
                            <t-item-section>3rd level Label</t-item-section>
                          </t-item>
                        </t-list>
                      </t-menu>
                    </t-item>
                  </t-list>
                </t-menu>
              </t-item>
              <t-separator />
              <t-item clickable v-close-popup>
                <t-item-section>Quit</t-item-section>
              </t-item>
            </t-list>
          </t-menu>
        </div>
        <div class="cursor-pointer non-selectable"
          >Edit
          <t-menu>
            <t-list dense style="min-width: 100px">
              <t-item clickable v-close-popup>
                <t-item-section>Cut</t-item-section>
              </t-item>
              <t-item clickable v-close-popup>
                <t-item-section>Copy</t-item-section>
              </t-item>
              <t-item clickable v-close-popup>
                <t-item-section>Paste</t-item-section>
              </t-item>
              <t-separator />
              <t-item clickable v-close-popup>
                <t-item-section>Select All</t-item-section>
              </t-item>
            </t-list>
          </t-menu>
        </div>
        <t-space />
        <t-btn dense flat icon="minimize" />
        <t-btn dense flat icon="crop_square" />
        <t-btn dense flat icon="close" />
      </t-bar>
    </div>
  </div>
</template>
